/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.s1107.com
* @Contact: QQ:2487937004
*/z
<template>
  <view class="page">
    <form @submit="login" class="form">
      <view class="formContent">
        <view class="formItem">
          <input type="text" class="input" name="phone" placeholder="请输入手机号" v-model="phone">
        </view>
        <view class="formItem">
          <input type="text" class="input" name="code" placeholder="请输入验证码" v-model="code" maxlength="6">
          <view class="sendCode btn-color" v-if="showTime">{{time}}s后重新获取</view>
          <view class="sendCode btn-color" @click="getCode()"  hover-class="text-hover" v-else>获取验证码</view>
        </view>
        <view class="formItem">
          <input type="password" class="input" name="pwd" placeholder="请输入新密码" v-model="pwd">
        </view>
        <view class="formButton">
          <view class="formButton">
            <button formType="submit" class="button" hover-class="text-hover">确认修改</button>
          </view>
        </view>
      </view>
    </form>
		<xiaokeai-humanCheck   :show="isfalse"    @checkResult="checkResultHandle"  ></xiaokeai-humanCheck>
  </view>

</template>
<script>
import graceChecker from "../../api/graceChecker.js"
export default {
  data() {
    return {
      timer: null, //定时器
      isClick: true, //避免用户重复点击
      time: 60, //60s后重置
      showTime: false, //时间与获取验证码切换
      phone:'',
      code:'',
	  isfalse:false,
      pwd:'',
    }
  },
  onLoad() {
  
  },
  methods: {
	  checkResultHandle(e){
	  	console.log(e)
	  	if(e.detail == 'success'){
	  		this.isfalse = false
             if (this.isClick) {
               if(this.phone.length!=11){
                 return this.$toast('手机格式不正确')
               }
               this.$loading()
               this.$http.findBackPwSms({
                 phone:this.phone
               }).then((res)=>{
                 this.showTime = true;
                 this.$toast(res.mess)
                 this.timer = setInterval(() => {
                   this.isClick = false;
                   this.time = this.time - 1;
                   if (this.time <= 0) {
                     this.isClick = true;
                     this.time = 60;
                     this.showTime = false;
                     clearInterval(this.timer);
                     this.timer = null;
                   }
                 }, 1000)
               })
             }
	  	}
	  },
    // 修改
    login(e) {
      var rule = [{
        name: "phone",
        checkType: "phoneno",
        checkRule: "",
        errorMsg: "请输入手机号"
      },
        {
          name: "code",
          checkType: "notnull",
          checkRule: "",
          errorMsg: "请输入验证码"
        },
        {
          name: "pwd",
          checkType: "string",
          checkRule: "6,20",
          errorMsg: "输入6-20位密码"
        },
      ];
      //进行表单检查
      var formData = e.detail.value;
      var checkRes = graceChecker.check(formData, rule);
      if (checkRes) {
        this.$http.findBackPwd({
          phone:this.phone,
          phonecode:this.code,
          password:this.pwd,
        }).then(res=>{
          console.log(this.code);
          if(res.status == 200) {
            this.$toast(res.mess)
            setTimeout (()=>{
              this.getback()
            },1500)
          }
          console.log(this.code,this.phone,this.pwd);
        })
      } else {
        this.$toast(graceChecker.error)
      }
    },
    // 获取验证码
    getCode() {
     this.isfalse = true
    },
  },
  // 页面卸载
  onUnload() {
    this.isClick = true;
    this.time = 60;
    // 清空定时器
    clearInterval(this.timer);
    this.timer = null;
  }
}
</script>
<style lang="less" scoped>
.page {
  padding-bottom: 20upx;
  .form {
    width: 100%;
    .formContent {
      padding-top: 100upx;
      padding-left: 40upx;
      padding-right: 24upx;
      .formItem {
        height: 104upx;
        display: flex;
        border-bottom:1upx solid rgba(238, 238, 238, 1);
        align-items: center;
        input {
          flex: 1;
          height: 100%;
          font-size: 30upx;
          font-weight: 400;
          
          &::-webkit-input-placeholder {
            color: rgba(204, 204, 204, 1);
          }
        }
        .getCode {
          font-size:34upx;
          color: #333;
        }
      }
      .formButton {
        margin-top: 60upx;
        height: 100upx;
        position: relative;
      }
    }
  }
}
</style>
